<template>
  <div class="padding-top-bottom-20 padding-left-right-40">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="基本信息" name="info">
        <base-info ref="info" @setProcessData="setProcessData"></base-info>
      </el-tab-pane>
      <template v-if="$route.query.key">
        <!-- <el-tab-pane label="流程表单" name="formenu">
                <form-menu ref="formenu" :process-name='processName'></form-menu>
            </el-tab-pane> -->
        <el-tab-pane label="流程设计" name="design">
          <flow-design ref="design"></flow-design>
        </el-tab-pane>
        <el-tab-pane label="职能结构" name="person">
          <person-structure ref="person" :process-data="processData"></person-structure>
        </el-tab-pane>
        <el-tab-pane label="抄送管理" name="cc">
          <ccManager ref="cc"></ccManager>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>
<script>
  import merge from 'webpack-merge';
  import BaseInfo from './infoTabs/baseInfo';
  import FlowDesign from './infoTabs/flowDesign';
  import formMenu from './infoTabs/formMenu';
  import personStructure from './infoTabs/personStructure';
  import ccManager from './infoTabs/ccManage';
  export default {
    data() {
      return {
        activeName: 'info',
        processName: '',
        processData: {},
      };
    },
    mounted() {
      this.setActiveName();
    },
    methods: {
      tabClick() {
        this.changeType(this.activeName);
        this.$nextTick(() => {
          this.$refs[this.activeName].getInfo();
        });
      },

      //设置ActiveName
      setActiveName() {
        if (!this.$route.query.tab) {
          this.changeType('info');
        }
        this.activeName = this.$route.query.tab;
        this.$nextTick(() => {
          if (this.$route.query.key) {
            this.$refs[this.activeName].getInfo();
          }
        });
      },
      //更新路由参数
      changeType(name) {
        if (this.$route.query.tab == name) {
          return false;
        }

        // console.log(this.$route.query, 'query')

        this.$router.replace({
          query: merge(this.$route.query, { tab: name }),
        });
      },
      //设置流程名字
      setProcessData(res) {
        this.processData = res;
        this.processName = res.processName;

        this.$route.query.primaryKey = res.formKey;
        this.$route.query.strucCode = res.bizStructure;
        this.$route.query.processName = res.processName;
      },
    },
    components: {
      BaseInfo,
      FlowDesign,
      formMenu,
      personStructure,
      ccManager,
    },
  };
</script>
